<template>
  <div id="ImportEmployee">
    <el-dialog title="花名册导入" width="50%" ref="dialog" :visible="ImportEmployeeDialog" :before-close="close">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="批量导入" name="1">
          <div class="btns">
            <el-button type="primary" @click="ImportWindow(1, 0)">导入新增人员</el-button>
            <span>说明: 主要用于导入系统中没有的员工信息,支持导入在职员工、离职员工。</span>
          </div>
          <div class="btns">
            <el-button type="primary" @click="ImportWindow(2, 0)">修改人员信息</el-button>
            <span>说明: 主要用于导入系统已存在的员工信息，用于批量修改信息。</span>
          </div>
        </el-tab-pane>
        <el-tab-pane name="3" label="导入其他信息">
          <div class="btns">
            <el-dropdown placement="bottom-start" @command="command">
              <el-button type="primary">合同信息<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="{ type: 1, code: 1005 }">导入新增</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <span>说明：主要用于导入系统中没有的合同信息或更新已存在的合同信息。</span>
          </div>
          <div class="btns">
            <el-dropdown placement="bottom-start" @command="command">
              <el-button type="primary">联系人信息<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="{ type: 1, code: 1006 }">导入新增</el-dropdown-item>
                <el-dropdown-item :command="{ type: 2, code: 1006 }">导入更新</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <span>说明：主要用于导入系统中没有的紧急联系人或更新已存在的联系人信息。</span>
          </div>
          <div class="btns">
            <el-dropdown placement="bottom-start" @command="command">
              <el-button type="primary">教育经历<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="{ type: 1, code: 1007 }">导入新增</el-dropdown-item>
                <el-dropdown-item :command="{ type: 2, code: 1007 }">导入更新</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <span>说明：主要用于导入系统中没有的教育经历或更新已存在的教育经历信息。</span>
          </div>
          <div class="btns">
            <el-dropdown placement="bottom-start" @command="command">
              <el-button type="primary">工作经历<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="{ type: 1, code: 1008 }">导入新增</el-dropdown-item>
                <el-dropdown-item :command="{ type: 2, code: 1008 }">导入更新</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <span>说明：主要用于导入系统中没有的工作经历或更新已存在的工作经历信息。</span>
          </div>
        </el-tab-pane>
        <el-tab-pane label="导入个人信息" name="2" class="tab2">
          <div class="swtich1">
            <el-radio v-model="IData.type" label="1">按员工导入</el-radio>
            <el-radio v-model="IData.type" label="2">按材料导入</el-radio>
          </div>
          <div class="uploadself">
            <el-upload :show-file-list="false" accept=".zip,.rar,.7z" class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :auto-upload="false" :on-change="handleChange">
              <el-input v-model="IData.file.name" readonly placeholder="请选择文件..." style="width: 30%"></el-input>
              <el-button size="small" type="default">浏览文档</el-button>
            </el-upload>
          </div>
          <div class="warnText" v-if="IData.type == 1">
            <p>导入说明：</p>
            <p>
              1、按员工导入，内容根据员工进行文件夹的命名；如：001-张三、002-李四。
              <el-popover placement="top-start" width="300" trigger="hover">
                <span style="color: #409eff; cursor: pointer" slot="reference">图示</span>
                <img src="../../../assets/images/personnel/example1.png" alt="" slot="default" />
              </el-popover>
            </p>
            <p>2、命名规则：</p>
            <p class="indent">1）员工文件夹命名为 姓名-员工号（同名员工需要带员工号）或员工号-XXXX。</p>
            <p class="indent">2）文件夹内文件命名为 文件名称-XXXXXX。</p>
            <p class="indent">同类型多附件（如身份证、学位证书、学历证书、自定义个人材料、其他） 命名 在文件名称后加-数字，</p>
            <p class="indent">如：“健康证明-1、健康证明-2”。</p>
            <p class="indent">3）合同需设立材料文件夹名为“合同附件”，并在合同附件 文件夹下设立 合同编号 的文件夹或文件。</p>
          </div>
          <div class="warnText" v-else>
            <p>导入说明：</p>
            <p>
              1、 按材料导入，内容根据材料名称进行文件夹的命名；如：身份证人像面、身份证国徽面；
              <el-popover placement="top-start" width="300" trigger="hover">
                <span style="color: #409eff; cursor: pointer" slot="reference">图示</span>
                <img src="../../../assets/images/personnel/example2.png" alt="" slot="default" />
              </el-popover>
            </p>
            <p>2、命名规则：</p>
            <p class="indent">1）材料文件夹命名为材料名称。</p>
            <p class="indent">2）文件夹内文件命名为 姓名-员工号（同名员工需要带员工号）或员工号-XXXX。</p>
            <p class="indent">3）合同需设立材料文件夹名为“合同附件”，并在合同附件 文件夹下设立 员工号-姓名-合同编号 的文件夹或文件</p>
            <!-- <p class="indent">导入时，文件夹名称以材料名称为主体</p> -->
          </div>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer" v-if="activeName == 2">
        <el-button type="primary" @click="importFile">导入</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "ImportEmployee",
  props: {
    ImportEmployeeDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      activeName: "1",
      isDialog: false,
      checkList: [], //选择的列
      list: [], //所有列
      IData: {
        type: "1",
        file: { name: "" },
      },
    };
  },
  computed: {
    ...mapState({
      tagCurrent: (state) => state.tag.tagCurrent,
    }),
  },
  methods: {
    command(obj) {
      this.ImportWindow(obj.type, obj.code);
    },
    ImportWindow(type, code) {
      this.ImportEmployeeDialog = false;
      this.$store.commit("DEL_TAG", this.tagCurrent);
      this.$router.push({
        path: type == 1 ? "/importEmployeeAdd" : "/importEmployeeEdit",
        query: { type: type, moduleCode: code },
      });
    },
    importFile() {
      let formData = new FormData();
      formData.append("formFile", this.IData.file.raw);
      this.$api.employeeApi.ImportFileInfo({ data: formData, importType: this.IData.type }).then((res) => {
        if (res.data.status == 200) {
          this.close();
          this.$message.success(res.data.message);
          this.IData.file = null;
        }
      });
    },
    handleChange(file) {
      if (file.name.indexOf(".zip") > -1 || file.name.indexOf(".7z") > -1 || file.name.indexOf(".rar") > -1 || file.name.indexOf(".tar") > -1) {
        this.IData.file = file;
      } else {
        this.$message.warning("只支持压缩包类型(zip;7z;rar;tar)的文件");
      }
    },
    async getCustomHeader() {
      const {
        data: {
          data: { displayColumns, notDisplayColumns },
        },
      } = await this.$api.employeeApi.GetColumnStyleSetting();
      this.displayColumns = displayColumns.sort((a, b) => a.index - b.index);
      this.notDisplayColumns = notDisplayColumns.sort((a, b) => a.index - b.index);
    },
    columnConfirm() {
      this.isDialog = false;
    },
    async onSelectColumn() {
      //选择列
      this.isDialog = true;
      const { data } = await this.$api.optionsManage.GetPartImportColunms();
      this.list = data.data;
    },
    columnClose() {
      //关闭选择列
      this.isDialog = false;
      this.checkList = [];
    },
    uploadSectionFile(params) {
      //导入
      const { file } = params;
      const form = new FormData();
      form.append("file", file);
      // activeName 1 全覆盖式导入 2 分列式导入
      this.$api.optionsManage[this.activeName == 1 ? "Import" : "PartImport"](form).then((res) => {
        if (res.data.status == 200) {
          this.$message({
            message: res.data.message,
            type: "success",
          });
        }
      });
    },
    async downLoadTemplate() {
      //下载模板
      const download = ({ data, fileName }) => {
        const blob = new Blob([data], { type: "application/vnd.ms-excel" });
        const blobUrl = URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = blobUrl;
        a.download = `${fileName}.xlsx`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(blobUrl);
      };
      // activeName 1 全覆盖式导入 2 分列式导入
      const { data } = await this.$api.optionsManage[this.activeName == 1 ? "GetImportTemplate" : "GetPartImportTemplate"](this.activeName == 1 ? {} : this.checkList);
      download({ data, fileName: "员工花名册导入模板" });
    },
    handleClick() {},
    close() {
      // debugger
      this.IData.file = { name: "" };
      this.$emit("close");
    },
  },
};
</script>

<style lang="less" scoped>
#ImportEmployee {
  :deep( .el-checkbox-group) {
    display: flex;
    flex-direction: column;
  }
  :deep( .el-dialog__body ){
    padding-top: 0;
    padding-bottom: 20px;
  }
  :deep( .upload-demo ){
    margin: 0 !important;
  }
  .el-button {
    margin: 0;
  }
  .mb-20 {
    margin-bottom: 20px;
  }

  .container {
    display: flex;
    // align-content: flex-end;
    margin-bottom: 5px;
    align-items: flex-end;
    .selected {
      margin-left: 8px;
    }
  }
  .download {
    text-decoration: underline;
    color: #179bd4;
    display: inline-block;
    cursor: pointer;
  }
  .box {
    .title {
      margin-bottom: 10px;
    }
  }
  .btns {
    display: flex;
    flex-flow: column;
    margin-top: 28px;
    .el-button {
      width: 100px;
      height: 34px;
    }
  }

  .el-tabs {
    height: 400px;
    .tab2 {
      .swtich1 {
        margin-top: 10px;
      }
      .uploadself {
        margin-top: 12px;
        :deep(.upload-demo) {
          cursor: pointer !important;
          .el-upload {
            display: flex !important;
            flex-flow: row;
            .el-input__inner {
              padding-left: 0;
            }
            .el-button {
              margin-left: 12px;
              background-color: #eaeaea;
              color: #323232;
            }
          }
        }
      }
      .warnText {
        margin-top: 35px;
        .indent {
          text-indent: 20px;
        }
      }
    }
  }
}
</style>
